<template>
  <!-- 担保明细  -->
    <div class="interestCalculationDetailsPage">
        <div class="search-wrap d-flex a-center j-end">
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        class="button_edit"
                        @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handle-selection-change="handleSelectionChange"
        />
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import PublicTable from "@/components/PublicTable.vue";

import {tableCommonFun} from "@/hooks/tableCommon";
import {useRouter} from "vue-router";

const router = useRouter();
const id = router.currentRoute.value.params.id;

const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'guaranteeApi.getBankGuaranteeDetailed',
});
const exportConfig = reactive({
    fileName:'businessFinance',
    apiPath:'exportApi.detailedLeadingOut',
    tableName:'担保台明细表'
});
const {
    form,
    page,
    tableOption,
    tableData,
    getData,
    onPageChange,
    onExport,
    handleSelectionChange
}  = tableCommonFun(interfaceConfig,exportConfig);

form.value = {
    guaranteeCompanyId:''
}

tableOption.value = [
    { label: "担保公司", prop: "guaranteeCompanyName"},
    { label: "被担保公司", prop: "wasGuaranteedCompanyName" },
    { label: "担保合同号", prop: "guaranteeContractNumber" },
    { label: "借款合同号", prop: "loanContractNumber" },
    { label: "担保金额", prop: "guaranteeAmount" },
    { label: "借款金额", prop: "loanAmount" },
    { label: "金融机构", prop: "institutionName" },
    { label: "借款开始时间", prop: "loanStartTime" },
    { label: "借款结束时间", prop: "loanEndTime" },
    { label: "担保开始时间", prop: "guaranteeStartTime" },
    { label: "担保结束时间", prop: "guaranteeEndTime" },
    { label: "担保方式", prop: "type",formatter:(val,row)=>{
        return ['','对内担保','对外担保','对内借款','对外借款'][val];
    } },
];

onMounted(()=>{
    form.value.guaranteeCompanyId = id;
    getData({
        pageNum:1,
        pageSize:10,
        param:{
            guaranteeCompanyId:id
        }
    });
});
</script>

<style lang="scss" scoped>
.interestCalculationDetailsPage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
